import "./zoneRank.scss";
import { Fragment } from 'react';

const mockData = [
    {
        title:'创业指数',
        desc:'434344.CSI（17.49分）',
        max:'94%',
        pass:'61%'
    },
    {
        title:'创业指数',
        desc:'434344.CSI（17.49分）',
        max:'94%',
        pass:'61%'
    },
    {
        title:'创业指数',
        desc:'434344.CSI（17.49分）',
        max:'94%',
        pass:'61%'
    }
]
function zoneRank(){
    const rankData = mockData
    return(
            <div className="zoneRank">
                <div className="zoneRank_title justify-between">
                <img
                    className="label_4"
                    src={
                    "https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga869c1090a18d24535bfb000cd4be9ca7569d28fa4cfd977b660ef1fa5185473"
                    }
                    alt=""
                />
                <div className="text-group_6">
                    <span className="text_45">低估</span>
                    <span className="text_46">排行&nbsp;适合长期定投</span>
                </div>
                </div>
                <div className="group_20">
                    <div className="text-wrapper_22 flex-row">
                        <div className="text_47">指数宝打分</div>
                        <div className="text_48">综合打分越低越定投</div>
                        <div className="text_49">4月23日</div>
                    </div>
                    <div className="section_1 justify-between">
                        <div className="text-wrapper_23 flex-col">
                        <span className="text_50">宽基指数</span>
                        </div>
                        <div className="text-wrapper_24 flex-col">
                        <span className="text_51">行业指数</span>
                        </div>
                    </div>
                    { rankData.map((rank,index)=>(
                        <Fragment key={index}>
                            <div className="zoneRank_content flex-row align-center">
                                <div className="zoneRank_content_rank1"/>
                                <div className="zoneRank_content_item">
                                    <div className="zoneRank_content_title flex-row">
                                        <div className="text_52">{rank.title}</div>
                                        <div className="text_53">{rank.desc}</div>
                                    </div>
                                    <div className="section_3">
                                        <div className="image-text_6 flex-row align-center">
                                            <div className="image_max" />
                                            <div className="text-group_7">
                                                <div className="text-wrapper_26">
                                                    <span className="text_54">估值低于近10年</span>
                                                    <span className="text_max">{rank.max}</span>
                                                    <span className="text_54">的时间</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="image-text_6 flex-row align-center">
                                            <div className="image_pass" />
                                            <div className="text-group_7">
                                                <div className="text-wrapper_26">
                                                    <span className="text_54">景气度一般，优于</span>
                                                    <span className="text_pass">{rank.pass}</span>
                                                    <span className="text_54">的指数</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                           {index===rankData.length?<div className="section_5" />:<></>} 
                        </Fragment>
                    ))}
                </div>
            </div>
    )
}

export default zoneRank;